<a href='https://github.com/angular/angular.js/edit/v1.5.x/src/ng/directive/ngClass.js?message=docs(ngClass)%3A%20describe%20your%20change...#L128' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.5.8/src/ng/directive/ngClass.js#L128' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngClass</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>The <code>ngClass</code> directive allows you to dynamically set CSS classes on an HTML element by databinding
an expression that represents all classes to be added.</p>
<p>The directive operates in three different ways, depending on which of three types the expression
evaluates to:</p>
<ol>
<li><p>If the expression evaluates to a string, the string should be one or more space-delimited class
names.</p>
</li>
<li><p>If the expression evaluates to an object, then for each key-value pair of the
object with a truthy value the corresponding key is used as a class name.</p>
</li>
<li><p>If the expression evaluates to an array, each element of the array should either be a string as in
type 1 or an object as in type 2. This means that you can mix strings and objects together in an array
to give you more control over what CSS classes appear. See the code below for an example of this.</p>
</li>
</ol>
<p>The directive won&#39;t add duplicate classes if a particular class was already set.</p>
<p>When the expression changes, the previously added classes are removed and only then are the
new classes added.</p>

</div>



<h2 id="known-issues">Known Issues</h2>
<div class="known-issue">
  <p>You should not use <a href="guide/interpolation">interpolation</a> in the value of the <code>class</code>
attribute, when using the <code>ngClass</code> directive on the same element.
See <a href="guide/interpolation#known-issues">here</a> for more info.</p>
  
</div>




<div>
  

  
  <h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 0.</li>
    
  </ul>

  
  <h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    <li>as attribute:
        <pre><code>&lt;ANY&#10;  ng-class=&quot;expression&quot;&gt;&#10;...&#10;&lt;/ANY&gt;</code></pre>
      </li>
    <li>as CSS class:
        <pre><code>&lt;ANY class=&quot;ng-class: expression;&quot;&gt; ... &lt;/ANY&gt;</code></pre>
      </li>
    
  </div>
  
  <h2 id="animations">Animations</h2>
  <table>
<thead>
<tr>
<th>Animation</th>
<th>Occurs</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="api/ng/service/$animate#addClass">addClass</a></td>
<td>just before the class is applied to the element</td>
</tr>
<tr>
<td><a href="api/ng/service/$animate#removeClass">removeClass</a></td>
<td>just before the class is removed from the element</td>
</tr>
</tbody>
</table>

  <a href="api/ngAnimate/service/$animate">Click here</a> to learn more about the steps involved in the animation.
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        ngClass
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-expression">expression</a>
      </td>
      <td>
        <p><a href="guide/expression">Expression</a> to eval. The result
  of the evaluation can be a string representing space delimited class
  names, an array, or a map of class names to boolean values. In the case of a map, the
  names of the properties whose values are truthy will be added as css classes to the
  element.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

</section>
  


  
  <h2 id="example">Example</h2><p>Example that demonstrates basic bindings via ngClass directive.
   

<div>
  <plnkr-opener example-path="examples/example-example64"></plnkr-opener>

  <div class="runnable-example"
      path="examples/example-example64">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;p ng-class=&quot;{strike: deleted, bold: important, &#39;has-error&#39;: error}&quot;&gt;Map Syntax Example&lt;/p&gt;&#10;&lt;label&gt;&#10;   &lt;input type=&quot;checkbox&quot; ng-model=&quot;deleted&quot;&gt;&#10;   deleted (apply &quot;strike&quot; class)&#10;&lt;/label&gt;&lt;br&gt;&#10;&lt;label&gt;&#10;   &lt;input type=&quot;checkbox&quot; ng-model=&quot;important&quot;&gt;&#10;   important (apply &quot;bold&quot; class)&#10;&lt;/label&gt;&lt;br&gt;&#10;&lt;label&gt;&#10;   &lt;input type=&quot;checkbox&quot; ng-model=&quot;error&quot;&gt;&#10;   error (apply &quot;has-error&quot; class)&#10;&lt;/label&gt;&#10;&lt;hr&gt;&#10;&lt;p ng-class=&quot;style&quot;&gt;Using String Syntax&lt;/p&gt;&#10;&lt;input type=&quot;text&quot; ng-model=&quot;style&quot;&#10;       placeholder=&quot;Type: bold strike red&quot; aria-label=&quot;Type: bold strike red&quot;&gt;&#10;&lt;hr&gt;&#10;&lt;p ng-class=&quot;[style1, style2, style3]&quot;&gt;Using Array Syntax&lt;/p&gt;&#10;&lt;input ng-model=&quot;style1&quot;&#10;       placeholder=&quot;Type: bold, strike or red&quot; aria-label=&quot;Type: bold, strike or red&quot;&gt;&lt;br&gt;&#10;&lt;input ng-model=&quot;style2&quot;&#10;       placeholder=&quot;Type: bold, strike or red&quot; aria-label=&quot;Type: bold, strike or red 2&quot;&gt;&lt;br&gt;&#10;&lt;input ng-model=&quot;style3&quot;&#10;       placeholder=&quot;Type: bold, strike or red&quot; aria-label=&quot;Type: bold, strike or red 3&quot;&gt;&lt;br&gt;&#10;&lt;hr&gt;&#10;&lt;p ng-class=&quot;[style4, {orange: warning}]&quot;&gt;Using Array and Map Syntax&lt;/p&gt;&#10;&lt;input ng-model=&quot;style4&quot; placeholder=&quot;Type: bold, strike&quot; aria-label=&quot;Type: bold, strike&quot;&gt;&lt;br&gt;&#10;&lt;label&gt;&lt;input type=&quot;checkbox&quot; ng-model=&quot;warning&quot;&gt; warning (apply &quot;orange&quot; class)&lt;/label&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="style.css"
      language="css"
      type="css">
      <pre><code>.strike {&#10;    text-decoration: line-through;&#10;}&#10;.bold {&#10;    font-weight: bold;&#10;}&#10;.red {&#10;    color: red;&#10;}&#10;.has-error {&#10;    color: red;&#10;    background-color: yellow;&#10;}&#10;.orange {&#10;    color: orange;&#10;}</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>var ps = element.all(by.css(&#39;p&#39;));&#10;&#10;it(&#39;should let you toggle the class&#39;, function() {&#10;&#10;  expect(ps.first().getAttribute(&#39;class&#39;)).not.toMatch(/bold/);&#10;  expect(ps.first().getAttribute(&#39;class&#39;)).not.toMatch(/has-error/);&#10;&#10;  element(by.model(&#39;important&#39;)).click();&#10;  expect(ps.first().getAttribute(&#39;class&#39;)).toMatch(/bold/);&#10;&#10;  element(by.model(&#39;error&#39;)).click();&#10;  expect(ps.first().getAttribute(&#39;class&#39;)).toMatch(/has-error/);&#10;});&#10;&#10;it(&#39;should let you toggle string example&#39;, function() {&#10;  expect(ps.get(1).getAttribute(&#39;class&#39;)).toBe(&#39;&#39;);&#10;  element(by.model(&#39;style&#39;)).clear();&#10;  element(by.model(&#39;style&#39;)).sendKeys(&#39;red&#39;);&#10;  expect(ps.get(1).getAttribute(&#39;class&#39;)).toBe(&#39;red&#39;);&#10;});&#10;&#10;it(&#39;array example should have 3 classes&#39;, function() {&#10;  expect(ps.get(2).getAttribute(&#39;class&#39;)).toBe(&#39;&#39;);&#10;  element(by.model(&#39;style1&#39;)).sendKeys(&#39;bold&#39;);&#10;  element(by.model(&#39;style2&#39;)).sendKeys(&#39;strike&#39;);&#10;  element(by.model(&#39;style3&#39;)).sendKeys(&#39;red&#39;);&#10;  expect(ps.get(2).getAttribute(&#39;class&#39;)).toBe(&#39;bold strike red&#39;);&#10;});&#10;&#10;it(&#39;array with map example should have 2 classes&#39;, function() {&#10;  expect(ps.last().getAttribute(&#39;class&#39;)).toBe(&#39;&#39;);&#10;  element(by.model(&#39;style4&#39;)).sendKeys(&#39;bold&#39;);&#10;  element(by.model(&#39;warning&#39;)).click();&#10;  expect(ps.last().getAttribute(&#39;class&#39;)).toBe(&#39;bold orange&#39;);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example64/index.html" name="example-example64"></iframe>
  </div>
</div>


</p>
<h2 id="animations">Animations</h2>
<p>   The example below demonstrates how to perform animations using ngClass.</p>
<p>   

<div>
  <plnkr-opener example-path="examples/example-example65"></plnkr-opener>

  <div class="runnable-example"
      path="examples/example-example65"
      module="ngAnimate"
      deps="angular-animate.js"
      animations="true">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;input id=&quot;setbtn&quot; type=&quot;button&quot; value=&quot;set&quot; ng-click=&quot;myVar=&#39;my-class&#39;&quot;&gt;&#10;&lt;input id=&quot;clearbtn&quot; type=&quot;button&quot; value=&quot;clear&quot; ng-click=&quot;myVar=&#39;&#39;&quot;&gt;&#10;&lt;br&gt;&#10;&lt;span class=&quot;base-class&quot; ng-class=&quot;myVar&quot;&gt;Sample Text&lt;/span&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="style.css"
      language="css"
      type="css">
      <pre><code>.base-class {&#10;  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;&#10;}&#10;&#10;.base-class.my-class {&#10;  color: red;&#10;  font-size:3em;&#10;}</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should check ng-class&#39;, function() {&#10;  expect(element(by.css(&#39;.base-class&#39;)).getAttribute(&#39;class&#39;)).not.&#10;    toMatch(/my-class/);&#10;&#10;  element(by.id(&#39;setbtn&#39;)).click();&#10;&#10;  expect(element(by.css(&#39;.base-class&#39;)).getAttribute(&#39;class&#39;)).&#10;    toMatch(/my-class/);&#10;&#10;  element(by.id(&#39;clearbtn&#39;)).click();&#10;&#10;  expect(element(by.css(&#39;.base-class&#39;)).getAttribute(&#39;class&#39;)).not.&#10;    toMatch(/my-class/);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example65/index.html" name="example-example65"></iframe>
  </div>
</div>


</p>
<h2 id="ngclass-and-pre-existing-css3-transitions-animations">ngClass and pre-existing CSS3 Transitions/Animations</h2>
<p>   The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
   Upon animation ngAnimate will apply supplementary CSS classes to track the start and end of an animation, but this will not hinder
   any pre-existing CSS transitions already on the element. To get an idea of what happens during a class-based animation, be sure
   to view the step by step details of <a href="api/ng/service/$animate#addClass">$animate.addClass</a> and
   <a href="api/ng/service/$animate#removeClass">$animate.removeClass</a>.</p>

</div>


